<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_HelloReact</title>
    <!-- react.js react核心文件，支持react语法 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <!-- react-dom.js 支持reacj有关dom的操作 -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    <div id="app"></div>
    <script>
        /* 
            1.创建虚拟dom
            语法：React.createElement(参数1，参数2，参数3)
            参数1：节点名字
            参数2：节点的属性
            参数3及以后的参数：节点的内容

            例子1：创建一个h2标签，设置id为el2，设置内容为“hello，react”
            2.将其渲染到容器app中
         */
        let app =document.getElementById("app");
        let newH2 = React.createElement("h2",{id:"el2"},"hello,react");
        ReactDOM.render(newH2,app);
        /* 例子2：创建一个div，设置id为div1，设置内容为：p元素，class值为elp，内容为"hi,react" */
        let eleP = React.createElement("p",{className:"elp"},"hi,react");
        let eleDiv = React.createElement("div",{id:"div1"},eleP)
        ReactDOM.render(eleDiv,app);
        /* 例子3：创建一个ul标签，设置class为ul1，里面有3个li，分别设置class为li1，li2，li3，分别设置内容，“这是列表项li1”，“这是列表项li2”，“这是列表项li3” */
        let li1=React.createElement("li",{className:"li1"},"这是列表项li1");
        let li2=React.createElement("li",{className:"li2"},"这是列表项li2");
        let li3=React.createElement("li",{className:"li3"},"这是列表项li3");
        let ul1=React.createElement("ul",{className:"ul1"},li1,li2,li3);
        ReactDOM.render(ul1,app);
    </script>
</body>
</html>